<template>
  <view class="y-filter">
    <view class="drop-down__tab">
      <template v-for="(v, index) in tabItems" :key="v.type">
        <view
          v-if="v.isDrop"
          :class="[
            'drop-down__tabItem',
            currentTab === index && dropShow && 'drop-down__tabItem--active',
          ]"
          @click="v.fn()"
        >
          <text>{{ v.title }}</text>
          <view class="ali-icon">{{ '&#xe6c7;' }}</view>
        </view>
      </template>
    </view>
    <TuiTopDropdown
      v-model="dropShow"
      :paddingbtm="110"
      :mask="true"
      :translateyPx="translatey"
      @close="btnCloseDrop"
    >
      <scroll-view class="tui-scroll-box" scroll-y scroll-with-animation :scroll-top="scrollTop">
        <view class="tui-seizeaseat-20"></view>
        <view
          v-if="tabItems[currentTab].data?.length"
          class="tui-drop-item"
          :class="[item.selected ? 'tui-bold' : '']"
          v-for="(item, index) in tabItems[currentTab].data"
          :key="index"
          @tap.stop="btnSelected(item)"
        >
          <text v-if="item.selected" class="ali-icon">&#xed1d;</text>
          <text class="tui-ml tui-middle">{{ item.name }}</text>
        </view>
        <view v-else class="empty">暂无数据</view>
      </scroll-view>
      <view class="drop-btns">
        <button class="rest-btn" type="none" @click="restFnc">重置</button>
        <button class="confirm-btn" type="primary" @click="submitFnc">确定</button>
      </view>
    </TuiTopDropdown>
    <SelectIndustry
      v-model:show="selectIndustryShow"
      :is-api-data="true"
      :selected="industryIdSelected"
      result-key="code"
      sources-key="orgIndustryId"
      @submit="handleSelectIndustrySubmit"
    />
  </view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { reactive, ref, watch } from 'vue';

  import TuiTopDropdown from '@/components/TuiTopDropdown/index.vue';
  import { getCooperationTypeList } from '@/api/businessOpportunities';
  import { AssTypeEnum } from '@/enums/orderEnum';
  import SelectIndustry from '@/components/SelectIndustry/index.vue';
  import { BoTypeEnum } from '@/enums/businessOpportunitiesEnum';

  const props = defineProps({
    headerHeight: propTypes.number.def(0),
    zIndex: propTypes.number.def(998),
  });

  const emit = defineEmits(['submit']);

  const currentTab = ref(0);

  const selectIndustryShow = ref(false);

  const industryIdSelected = ref<string[]>([]);

  const tabItems = ref([
    {
      title: '合作类型',
      type: 'cooperationType',
      data: [] as unknown as IData[],
      fn: async () => {
        dropShow.value = true;
        currentTab.value = 0;
        if (tabItems.value[0].data?.length) return;
        const res = await getCooperationTypeList();
        tabItems.value[0].data = res.map((item) => {
          return {
            name: item.cooperationTypeName,
            dictValue: String(item.id),
            id: item.id,
            selected: false,
          };
        });
      },
      isDrop: true,
    },

    {
      title: '所属行业',
      type: 'industryIds',
      data: [] as unknown as IData[],
      fn: async () => {
        dropShow.value = false;
        currentTab.value = 1;
        selectIndustryShow.value = true;
      },
      isDrop: true,
    },
    {
      title: '供需来源',
      type: 'assTypeList',
      data: [] as unknown as IData[],
      fn: async () => {
        dropShow.value = true;
        currentTab.value = 2;
        if (tabItems.value[2].data?.length) return;
        tabItems.value[2].data = [
          {
            name: '会内供需',
            id: AssTypeEnum.INNER,
          },
          {
            name: '会外供需',
            id: AssTypeEnum.OUTSIDE,
          },
        ].map((item) => {
          return {
            name: item.name,
            dictValue: item.id,
            id: item.id,
            selected: false,
          };
        });
      },
      isDrop: true,
    },
    {
      title: '供需类型',
      type: 'boTypes',
      data: [] as unknown as IData[],
      fn: async () => {
        dropShow.value = true;
        currentTab.value = 3;
        if (tabItems.value[3].data?.length) return;
        tabItems.value[3].data = [
          {
            name: '只看供应',
            id: BoTypeEnum.Supply,
          },
          {
            name: '只看需求',
            id: BoTypeEnum.Demand,
          },
        ].map((item) => {
          return {
            name: item.name,
            dictValue: item.id,
            id: item.id,
            selected: false,
          };
        });
      },
      isDrop: true,
    },
  ]);

  function handleSelectIndustrySubmit(codes: string[]) {
    industryIdSelected.value = codes;
    emit('submit', getFilterData());
  }

  const translatey = ref(props.headerHeight);
  watch(
    () => props.headerHeight,
    (val) => {
      translatey.value = val;
    },
  );
  /** 下拉筛选控件相关 */
  interface IData {
    selected: boolean;
    name: string;
    id: AssTypeEnum | number | string | undefined;
    dictValue: string | number | undefined;
  }

  const dropShow = ref(false);
  const scrollTop = ref(0);
  function btnCloseDrop() {
    dropShow.value = false;
  }
  function btnSelected(item: IData) {
    item.selected = !item.selected;
  }
  const getFilterData = () => {
    return tabItems.value.reduce(
      (pre, curr) => {
        if (curr.type === 'industryIds') return pre;
        return {
          ...pre,
          [curr.type]: curr.data.filter((item) => item.selected).map((mitem) => mitem.dictValue),
        };
      },
      {
        industryIds: industryIdSelected.value,
      },
    );
  };
  /** 重置所有选中 */
  function restFnc() {
    tabItems.value = tabItems.value.map((item) => {
      item.data.map((citem) => {
        citem.selected = false;
        return citem;
      });
      return item;
    });
    industryIdSelected.value = [];

    emit('submit', getFilterData());
    btnCloseDrop();
  }

  /** 提交选中内容 */
  function submitFnc() {
    emit('submit', getFilterData());
    btnCloseDrop();
  }
</script>

<style lang="scss" scoped>
  view {
    box-sizing: border-box;
  }

  .y-filter {
    height: 88rpx;
    position: relative;
  }

  .drop-down {
    &__tab {
      width: 750rpx;
      height: 88rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      // position: relative;
      z-index: v-bind(zIndex);
      position: fixed;
      left: 0;
    }

    &__more {
      width: 36rpx;
      height: 35rpx;
      margin-right: 30rpx;
    }

    &__tabItem {
      color: #808080;
      font-size: 27rpx;
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      > .ali-icon {
        margin-left: 6rpx;
        font-size: 32rpx;
        color: #aaabab;
        transform: rotateZ(90deg);
        transition: all 0.3s;
      }
    }

    &__tabItem--active {
      background-color: #f2f2f2;
      color: #000;

      > .ali-icon {
        color: #000;
        transform: rotateZ(270deg);
      }
    }
  }

  .tui-scroll-box {
    width: 100%;
    height: 480rpx;
    // max-height: 480rpx;
    box-sizing: border-box;
    position: relative;
    // z-index: 7;
    color: #fff;
    font-size: 30rpx;
    word-break: break-all;
  }

  .tui-seizeaseat-20 {
    height: 20rpx;
  }

  .tui-drop-item {
    // color: #808080;
    // height: 40rpx;
    // line-height: 40rpx;
    // font-size: 24rpx;
    // padding: 0 17rpx;
    // box-sizing: border-box;
    // display: inline-block;
    // margin-left: 30rpx;
    // margin-bottom: 30rpx;
    // background-color: #DDDDDD;
    // border-radius: 20rpx;
    color: #333;
    height: 80rpx;
    font-size: 28rpx;
    padding: 20rpx 40rpx 20rpx 40rpx;
    box-sizing: border-box;
    display: inline-block;
    width: 50%;
  }

  .empty {
    width: 100%;
    padding: 30rpx 0;
    text-align: center;
    color: #333333;
    font-size: 28rpx;
  }

  .tui-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx 0;
    border-top: 1rpx #dddddd solid;

    .ali-icon {
      color: #fff;
      background: #707070;
      border-radius: 50%;
      font-size: 16rpx;
      width: 20rpx;
      height: 20rpx;
      text-align: center;
      line-height: 20rpx;
      box-sizing: border-box;
      padding-left: 0rpx;
      padding-top: 0rpx;
    }

    .text {
      font-size: 23rpx;
      color: #808080;
      margin-left: 10rpx;
    }
  }

  .tui-action:active {
    background-color: #dddddd;
  }

  .tui-middle {
    vertical-align: middle;
  }

  .tui-drop-item .tui-icon-class {
    vertical-align: middle;
  }

  .tui-bold {
    font-weight: bold;
    color: #ef823a;

    .ali-icon {
      color: #ef823a;
    }
  }

  // .tui-ml {
  //   margin-left: 6rpx;
  // }

  .drop-btns {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;

    > button {
      flex: 1;
      text-align: center;
      line-height: 100rpx;
      border-radius: 0;
    }

    .confirm-btn {
      background-color: #ef823a;
    }
  }

  .d-container {
    width: 530rpx;
    height: 100%;
    display: flex;
    align-items: flex-start;

    // box-sizing: border-box;
    .label {
      width: 200rpx;
      background-color: #fff;
      height: 100%;
      padding-top: 30rpx;
      flex-shrink: 0;
      border-right: 1rpx #f5f5f5 solid;

      &_text {
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        text-align: left;
        font-size: 28rpx;
        color: #333333;
        text-align: center;
        border-bottom: 1rpx #f5f5f5 solid;
        // box-sizing: border-box;
      }
    }

    .value {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      padding-top: 30rpx;
      padding-right: 20rpx;
      max-height: 70%;
      overflow: auto;

      &_text {
        min-width: 134rpx;
        padding: 20rpx 10rpx;
        text-align: center;
        font-size: 28rpx;
        color: #333333;
        margin-left: 20rpx;
        background-color: #f5f5f5;
        margin-bottom: 15rpx;
      }
    }

    .__active {
      background-color: #ece2c6;
      color: #333333;
    }

    .btn {
      position: fixed;
      bottom: 115rpx;
      right: 35rpx;

      button {
        width: 260rpx;
        height: 88rpx;
        line-height: 88rpx;
        border-radius: 10rpx;
        font-size: 28rpx;
      }

      button::after {
        border: none;
      }

      button:last-child {
        margin-top: 30rpx;
      }

      ._confirm {
        background: #ece2c7;
        color: #333333;
      }

      ._reset {
        background: #333333;
        color: #fff;
      }
    }
  }
</style>
